// src/components/BiliIcon.tsx
import React from 'react';
import {createFromIconfontCN} from '@ant-design/icons';

// 1. 静态导入所有SVG图标（推荐方案）
import SearchIcon from '../../assets/icons/menu/search.svg?react';
import VipIcon from '../../assets/icons/menu/vip.svg?react';
import MessageIcon from '../../assets/icons/menu/message.svg?react';
import NewsIcon from '../../assets/icons/menu/news.svg?react';
import CollectionIcon from '../../assets/icons/menu/collection.svg?react';
import HistoryIcon  from '../../assets/icons/menu/history.svg?react';
// 图标映射表
const svgList = {
    search: SearchIcon, vip: VipIcon, message: MessageIcon, news: NewsIcon, collection: CollectionIcon,history: HistoryIcon,
};

// 2. 阿里云图标库配置
const Iconfont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_4929004_t4pk19ouuy9.js'
});

// 3. 类型定义

type SvgIconName = keyof typeof svgList;

interface IconProps {
    name: SvgIconName | `icon-${string}`;
    type: 'svg' | 'iconfont'
    size?: number | string;
    color?: string;
    className?: string;
    style?: React.CSSProperties;
    hollow?: boolean; //是否镂空
}


// 4. 主图标组件
const Icon = (props: IconProps) => {
    const {type = 'svg', name, size = 20, color, className, style, hollow, ...rest} = props;

    if (type === 'iconfont') {
        return (<Iconfont
            type={`${name}`}
            className={className}
            style={{
                fontSize: `${size}px`, color, ...style
            }}
            {...rest}
        />);
    }

    // @ts-ignore
    const SvgIcon = svgList[name];

    return SvgIcon ? (<SvgIcon
        width={size}
        height={size}
        stroke-width="1"
        stroke={hollow ? 'currentColor' : 'none'}
        fill={hollow ? 'none' : (color || 'currentColor')}
        className={className}
        style={{
            verticalAlign: '-0.25em', ...style
        }}
        {...rest}
    />) : null;
};
export default Icon
